import React, { useCallback, useMemo, useState } from 'react';
import { View, ScrollView, Text, Image } from '@ray-js/components';
import { useActions, useProps } from '@ray-js/panel-sdk';
import { Cell, CellGroup, Switch, BottomSheet, Icon } from '@ray-js/smart-ui';
import Checkmark from '@tuya-miniapp/icons/dist/svg/Checkmark';
import { getCdnUrl, publishDps } from '@ray-js/ray';
import clsx from 'clsx';

import { NavBarCustom } from '@/components/NavBarCustom';
import Strings from '@/i18n';
import styles from './index.module.less';

import res from '../../../res';

const option = [
  {
    code: 'py_lr',
    leftStyle: {
      left: '50rpx',
      zIndex: 3,
    },
  },
  {
    code: 'py_rl',
    rightStyle: {
      right: '50rpx',
      zIndex: 3,
    },
  },
  {
    code: 'wk_l',
    leftStyle: {
      transform: `rotateY(${75}deg)`,
    },
  },
  {
    code: 'wk_r',
    rightStyle: {
      transform: `rotateY(${-75}deg)`,
    },
  },
  {
    code: 'nk_l',
    leftStyle: {
      transform: `rotateY(${-65}deg)`,
    },
  },
  {
    code: 'nk_r',
    rightStyle: {
      transform: `rotateY(${65}deg)`,
    },
  },
];

export default function Home() {
  const { kc_fs: kcFs } = useProps();

  return (
    <View className={styles.view}>
      <NavBarCustom name={Strings.getLang('setting')} back />

      <ScrollView scrollY refresherTriggered>
        <View className={styles.scrollView}>
          {option.map(item => (
            <View
              className={clsx(styles.curtainBox, kcFs === item.code && styles.curtainBoxActive)}
              onClick={() => {
                // actions.kc_fs.set(item.code);
                publishDps({
                  kc_fs: item.code,
                });
              }}
            >
              <View className={styles.windowbg}>
                <View className={styles.curtain}>
                  <Image
                    src={res.singleCurtain}
                    className={clsx(styles.singleCurtainLeft)}
                    style={item.leftStyle}
                  />
                  <Image
                    src={res.singleCurtain}
                    className={clsx(styles.singleCurtainRight)}
                    style={item.rightStyle}
                  />
                </View>
              </View>
            </View>
          ))}
        </View>
      </ScrollView>
    </View>
  );
}
